<template>
  <div class="ticket-filter-page">
    <div class="app-container">
      <div class="configuration-tabs"><FilterConfiguration /></div>
      <div class="configuration-tabs"><RateCalculation /></div>

      <!-- <el-tabs v-model="activeTab" type="card" class="configuration-tabs">
        <el-tab-pane label="筛选配置" name="filter">
          <FilterConfiguration />
        </el-tab-pane>
        <el-tab-pane label="利率计算" name="rate">
          <RateCalculation />
        </el-tab-pane>
        <el-tab-pane label="批量配置" name="batch">
          <BatchConfiguration />
        </el-tab-pane>
      </el-tabs> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import FilterConfiguration from "./components/FilterConfiguration.vue"
import RateCalculation from "./components/RateCalculation.vue"
// import BatchConfiguration from "./components/BatchConfiguration/index.vue"

// const activeTab = ref("filter")
</script>

<style scoped>
.ticket-filter-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.app-container {
  width: 98%;
  margin: 0 auto;
  padding: 20px 0;
}

.configuration-tabs {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-tabs__header) {
  margin-bottom: 20px;
}

:deep(.el-tabs__content) {
  padding: 0;
}
</style>
